<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="/css/common.css" th:href="@{/css/common.css}">
		<link rel="stylesheet" type="text/css" href="/css/index.css" th:href="@{/css/index.css}">
		<link rel="stylesheet" type="text/css" href="/iconfont/iconfont.css" th:href="@{/iconfont/iconfont.css}">
		<link rel="stylesheet" type="text/css" href="/css/index.css" th:href="@{/css/fabu.css}">
		<script type="text/javascript"  th:src="@{/js/jquery.min.js}" ></script>
		<script type="text/javascript"  th:src="@{/js/jquery.cookie.js}" ></script>
		<script>
			$(function (){
				$("#add_btn").click(function (){
					var title = $("#title").val()
					var center = $("#center").val()
					var userid = $.cookie('userId');
					console.log(title);
					console.log(center);
					if(title == null || center == null || title==''||center==''){
						alert("文章标题或者内容不能为空")
						return
					}else{
						var data = {
							title:title,
							center:center,
							userId:userid
						};
						$.ajax({
							type:"post",
							url:"/article/add",
							data:data,
							success:(res)=>{
								if(res.code==200){
									alert("发布成功")
									window.location.replace("http://localhost:8085/index");
								}else{
									alert("发布失败")
								}
							}
						})
					}
				})
			})
		</script>
	</head>
	<body>
		<div class="w_100 flex flex-column align-center img_bg">
			<!-- 头部 -->
			<!-- 头部 -->
			<div class="nav w_100 flex justify-between align-center py-1 ">
				<div class="flex align-center">
					<img th:src="@{/images/blog_logo.svg}" class="blog_logo mx-5">
					<a th:href="@{/index}">
						<p class="mx-2 font-mini ">首页</p>
					</a>
					<a th:href="@{/fabu}">
						<p class="mx-2 font-mini ">发布</p>
					</a>

				</div>
				<div class="mr-5 flex align-center">
					<div class="fabu_btn flex align-center justify-center" id="add_btn">
						<p class="font-mini text-white ">发布</p>
					</div>
					<a th:href="@{/login}">
						<p class="font-mini mx-2" >注册</p>
					</a>
					<a th:href="@{/login}">
						<p class="font-mini mx-2">登录</p>
					</a>
				</div>
			</div>
			<!-- center -->
			<div class="w_100 flex pt-5 list_item">
				<div class="flex-1 mt-2 flex flex-column align-center">
					<div>
						<p class="font-weight-bold font-mini">目录</p>
						<p class="mt-2" style="color: #898e92;">根据正文内容输入</p>
					</div>
				</div>
				<div class="flex-5 bg-white px-5 py-3">
					<div class="item_title">
						<input type="text" placeholder="请输入标题"
						class="font-sm font-weight-bold my-2" id="title">
					</div>
					<div class="mt-3">
						<textarea class="font-md input_center" id="center"></textarea>
						<!-- <input type="text" class="font-md input_center"> -->
					</div>
				</div>
				<div class="flex-2 flex justify-center">
					<div class="right_text bg-white p-2 flex flex-column align-center">
						<img th:src="@{/images/right_img/fabu_wenzhang.gif}" >
						<p class="font-mini font-weight-bold my-2">发文助手</p>
						<p style="color: #909498;"class="font-mini">Hi，我是你的发文助手～ 我会实时检测内容提出优化建议，帮您提升内容质量。</p>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
